<template>
    <div class="app-container">
        <el-row class="row-padding">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item :label="$t('dataList.sample')">
                    <el-input v-model="sample" ></el-input>
                </el-form-item>
                <el-form-item :label="$t('dataList.username')">
                    <el-input v-model="userName" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" @click="query"></el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-table
                v-loading="listLoading"
                :data="tableData"
                stripe
                :current-page.sync="currentPage"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
        >
            <el-table-column label="ID">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column :label="$t('dataList.sample')" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.sample }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('dataList.model')" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.model }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('dataList.createTime')" align="center" :formatter="timeFormater">
            </el-table-column>
            <el-table-column :label="$t('dataList.username')" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    :label="$t('dataList.action')"
            >
                <template  slot-scope="{row}">
                    <el-button type="text" size="small" icon="el-icon-view" @click="handleShowDetail(row)"></el-button>
                    <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 15, 20, 50]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog
                :title="$t('dataList.detail')"
                :visible.sync="dataListDetailDialogVisible"
                width="80%"
                center>
            <el-row :gutter="12" style="margin-bottom: 20px">
                <el-col :lg="24" :xs="24">
                    <el-card shadow="always">
                        <div slot="header" class="clearfix">
                            <span> {{$t("lab.programSetting")}}</span>
                        </div>
                        <el-form ref="setting" label-width="auto" :inline="true">
                            <el-form-item :label="$t('lab.model')">
                                {{measuredata.setting.model}}
                            </el-form-item>
                            <el-form-item :label="$t('lab.spindle')">
                                {{measuredata.setting.spindle | spindleFormatter}}
                            </el-form-item>
                            <el-form-item :label="$t('lab.sampleName')">
                                {{measuredata.setting.sampleName}}
                            </el-form-item>
                            <el-form-item :label="$t('lab.operator')">
                                {{measuredata.setting.operator}}
                            </el-form-item>
                        </el-form>
                        <el-card shadow="always" >
                            <el-form ref="setting" :inline="true" label-width="auto"  v-for="(item, index) in measuredata.setting.programs" :key="index">
                                <el-form-item :label='$t("lab.programSettingData") + " " + (index + 1)'>

                                </el-form-item>
                                <el-form-item :label="$t('lab.timeGap')" prop="timeTip">
                                    {{item.timeGap}}
                                </el-form-item>
                                <el-form-item :label="$t('lab.measureTime')" prop="measureTime">
                                    {{item.measureTime}}
                                </el-form-item>
                                <el-form-item :label="$t('lab.rpm')" prop="rpm">
                                    {{item.rpm}}
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-card>
                </el-col>
            </el-row>

            <el-card shadow="always">
                <div slot="header" class="clearfix">
                    <span>{{$t("lab.receiving")}}</span>
                </div>
                <el-descriptions v-for="(item, index) in measuredata.receiving" :key="index" :title='$t("lab.receiving") + " " +(index + 1)'>
                    <el-descriptions-item :label="$t('lab.naindu')" > <el-tag>{{item.niandu}}</el-tag></el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.temperture')">{{item.temperture}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.spindle')"> {{measuredata.setting.spindle | spindleFormatter}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.rpm')"> {{measuredata.setting.programs[index].rpm}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.ratio')">{{item.ratio}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.ss')">{{item.ss}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.sr')">{{item.sr}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.m1')" v-if="showSuperAdmin">{{item.m1}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.m2')" v-if="showSuperAdmin">{{item.m2}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.m3')" v-if="showSuperAdmin">{{item.m3}}</el-descriptions-item>
                    <el-descriptions-item :label="$t('lab.lastTime')">{{item.timeLeft}}</el-descriptions-item>
                </el-descriptions>
            </el-card>
            <div>
                <highcharts :options="chartOptions" ref="chart"></highcharts>
            </div>

        </el-dialog>
    </div>
</template>

<style lang="scss">
    .app-container {

        .row-padding {
            margin-bottom: 20px;
            margin-top: 20px;
        }

    }

</style>

<script>
    import { queryProgramDataList, countProgramData, deleteprogramdata } from '../../../api/programdata'
    import dayjs from 'dayjs'
    import i18n from "../../../i18n";
    import {isEmptyStr, spindleFormatter} from "../../../utils/util";

    export default {
        data() {
            return {
                sample:"",
                userName:"",
                listLoading: true,
                currentPage: 1,
                pagesize: 10,
                total: 0,
                tableData:[],
                dataListDetailDialogVisible: false,
                measuredata: {
                    setting:{},
                    receiving:{}
                },
                chartOptions: {
                    zoomType: 'x',
                    title: {
                        text: this.$i18n.tc("chart.title")
                    },
                    yAxis: {
                        title: {
                            text: this.$i18n.tc("chart.yAxisViscometer")
                        }
                    },
                    xAxis: {
                        title: {
                            text: this.$i18n.tc("chart.xAxisRPM")
                        }
                    },
                    credits:{
                        enabled: false
                    },
                    tooltip: {
                        shared: true,
                        useHTML: true,
                        headerFormat:"",
                        pointFormatter: function () {
                            return this.x +  '<br/><span style="color: '+ this.series.color + '">\u25CF</span> '+
                                this.series.name+   ': <b>'+ this.y +'</b><br/>'
                        },
                    },
                    series: [],
                    responsive: {
                        rules: [
                            {
                                condition: {
                                    maxWidth: 500
                                },
                                credits:{
                                    enabled: false // 禁用版权信息
                                }
                            }
                        ]
                    }
                },
            }
        },
        created() {
            this.fetchData()
        },
        filters:{
          spindleFormatter(value) {
            return spindleFormatter(value)
          }
        },
        computed:{
            showSuperAdmin() {
                console.info("roles is " + this.$store.state.user.roles);
                return this.$store.state.user.roles == "SUPPERADMIN";
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                let condition = {sample: this.sample, username: this.userName, start: (this.currentPage - 1) * this.pagesize, size: this.pagesize};
                if (this.$store.state.user.roles.indexOf("SUPPERADMIN") === -1 && this.$store.state.user.roles.indexOf("ADMIN") === -1) {
                    condition["createOn"] = this.$store.state.user.id;
                }
                this.total = await countProgramData(condition);
                queryProgramDataList(condition).then(dataList => {
                    this.tableData = dataList;
                    this.listLoading = false
                })
            },
            handleSizeChange(val) {
                this.pagesize = val;
                this.fetchData()
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.fetchData();
            },
            query(){
                this.fetchData();
            },
            timeFormater(row) {
                return dayjs(row.createTime).format('YYYY-MM-DD HH:mm')
            },
            handleDelete(data) {
                this.$confirm(this.$i18n.tc("dataList.deleteTip") + ": " + data.sample, {type: 'warning'}).then(() => {
                    deleteprogramdata(data.id);
                    this.fetchData();
                    this.$message({
                        type: 'success',
                        message: this.$i18n.tc("dataList.deleteSuccessTip")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$i18n.tc("dataList.deleteCancelTip")
                    })
                })
            },
            handleShowDetail(data) {
                console.info(JSON.stringify(data));
                this.dataListDetailDialogVisible = true;
                this.measuredata = data;
                let series = [{
                    name: i18n.t("chart.xAxisRPM"),
                    data: []
                }];
                for (let i = 0; i < data.receiving.length; i++) {
                    let niandu = data.receiving[i].niandu;
                    if (isEmptyStr(niandu)) {
                        niandu = null;
                    }
                    let rpm = data.setting.programs[i].rpm;
                    series[0].data.push([rpm, niandu])
                }
                series[0].data.sort(function (a, b) {return a[0] - b[0]})
                this.chartOptions.series = series;
            }
        }
    }
</script>
